<script setup lang="ts">
import HeaderView from '../components/HeaderView.vue'
import FooterView from '../components/FooterView.vue'
</script>

<template>

  <HeaderView />

  <div class="container-container-my">

    <el-row :gutter="20">
      <el-col :span="4">
        <div class="my-left">
          <div class="face">
            <div class="facename">{{ userInfo.getUser().first }}</div>
            <h2>{{ userInfo.getUser().email }}</h2>
          </div>
          <div class="list">
            <router-link to="/Myhome">
              <svg t="1745294444222" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7560"><path d="M793.1 959.9H232.9C158.5 959.9 98 899.4 98 825V201.5c0-74.4 60.5-134.9 134.9-134.9H793c74.4 0 134.9 60.5 134.9 134.9V825c0.1 74.4-60.4 134.9-134.8 134.9z m-560.2-804c-25.1 0-45.6 20.5-45.6 45.6V825c0 25.1 20.5 45.6 45.6 45.6H793c25.1 0 45.6-20.5 45.6-45.6V201.5c0-25.1-20.5-45.6-45.6-45.6H232.9z" p-id="7561"></path><path d="M707.9 365.7H322.1c-24.7 0-44.7-20-44.7-44.7 0-24.7 20-44.7 44.7-44.7h385.7c24.7 0 44.7 20 44.7 44.7 0 24.7-20 44.7-44.6 44.7zM707.9 557.1H322.1c-24.7 0-44.7-20-44.7-44.7s20-44.7 44.7-44.7h385.7c24.7 0 44.7 20 44.7 44.7s-20 44.7-44.6 44.7zM573.3 748.5H322.1c-24.7 0-44.7-20-44.7-44.7 0-24.7 20-44.7 44.7-44.7h251.2c24.7 0 44.7 20 44.7 44.7 0 24.7-20 44.7-44.7 44.7z" p-id="7562"></path></svg>
              My Orders
            </router-link>

            <router-link to="/Settings" class="on">
              <svg t="1745294165954" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7098"><path d="M668.6 922.2H357.4c-48.1 0-92.9-26-116.7-67.8L84.2 579.7c-23.4-41-23.4-92 0-133L240.8 172c23.8-41.8 68.5-67.8 116.7-67.8h311.1c48.1 0 92.9 26 116.7 67.8l156.6 274.7c23.4 41 23.4 92 0 133L785.2 854.4c-23.8 41.8-68.5 67.8-116.6 67.8zM357.4 193.8c-16 0-30.9 8.6-38.9 22.6L162 491.1c-7.8 13.7-7.8 30.6 0 44.3l156.6 274.7c7.9 13.9 22.8 22.6 38.9 22.6h311.1c16 0 30.9-8.6 38.9-22.6L864 535.4c7.8-13.7 7.8-30.6 0-44.3L707.4 216.4c-7.9-13.9-22.8-22.6-38.9-22.6H357.4z"  p-id="7099"></path><path d="M513 696.4c-101 0-183.2-82.2-183.2-183.2S412 330.1 513 330.1s183.2 82.2 183.2 183.2S614 696.4 513 696.4z m0-276.8c-51.6 0-93.6 42-93.6 93.6s42 93.6 93.6 93.6 93.6-42 93.6-93.6-42-93.6-93.6-93.6z"  p-id="7100"></path></svg>
              Settings
            </router-link>
          </div>
        </div>
      </el-col>
      <el-col :span="20">
        <div class="my-right">
          <h2>Settings</h2>



          <div class="my-right-ssettings">

            <div class="nanme"><svg t="1744963850090" class="nanme-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9102"><path d="M320.4 960.7c-15.9 0-31.8-4.6-45.4-13.9l-50.8-34.4-33 27.8c-17.1 14.4-41.4 17.6-61.7 8.2C109.1 939 96 918.4 96 896V197.9c0-75.2 61.1-136.3 136.3-136.3h559.4c75.2 0 136.3 61.1 136.3 136.3v700.9c0 21.7-12 41.4-31.2 51.4-19.3 10-42.2 8.4-60-4.1l-47.6-33.6-36.4 29.1c-28.5 22.8-69 23.7-98.5 2.1L610 911.2l-52 35.5c-27.8 18.9-64.8 18.7-92.3-0.7l-49.5-34.8-48.9 34.7c-14 9.9-30.4 14.8-46.9 14.8z m568.3-88.1h0.2-0.2z m-472.6-53.3c16.3 0 32.7 4.9 46.6 14.7l49.6 34.9 52.2-35.6c28.3-19.3 65.9-18.7 93.5 1.6l43.8 32.1 36.3-29c28-22.4 68.1-23.6 97.4-2.9l2.4 1.7V197.9c0-25.6-20.8-46.4-46.4-46.4H232.3c-25.6 0-46.4 20.8-46.4 46.4v631.6c26-13.5 58.1-12.2 83 4.7l51.3 34.7 49-34.7c14.1-9.9 30.5-14.9 46.9-14.9z" fill="#333333" p-id="9103"></path><path d="M680.6 425.3H346.1c-24.8 0-45-20.1-45-45s20.1-45 45-45h334.5c24.8 0 45 20.1 45 45s-20.1 45-45 45zM503.5 637.6H346.1c-24.8 0-45-20.1-45-45s20.1-45 45-45h157.4c24.8 0 45 20.1 45 45s-20.2 45-45 45z" fill="#333333" p-id="9104"></path></svg><div>GENERAL INFORMATION</div></div>

            <dl>
              <dt>Email</dt>
              <dd>{{ userInfo.getUser().email }}</dd>
            </dl>

            <dl>
              <dt>Password</dt>
              <dd>
                <router-link to="/Settingspass">Change Password</router-link>
              </dd>
            </dl>

            <dl v-if="userInfo.getUser().mobile">
              <dt>Telephone Telephone</dt>
              <dd>+{{ userInfo.getUser().country }} {{ userInfo.getUser().mobile }}</dd>
            </dl>


            <div class="nanme"><svg t="1745208651157" class="tips-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9177" width="20" height="20"><path d="M823.1 880H202.6c-74.5 0-135.1-60.6-135.1-135V412.7c0-24.6 19.9-44.5 44.5-44.5h801.6c24.6 0 44.5 19.9 44.5 44.5V745c0.1 74.4-60.5 135-135 135zM156.6 457.2V745c0 25.3 20.6 46 46 46h620.6c25.4 0 46-20.6 46-46V457.2H156.6z" fill="#333333" p-id="9178"></path><path d="M913.6 457.2H112.1c-24.6 0-44.5-19.9-44.5-44.5v-130c0-74.5 60.6-135 135.1-135h620.6c74.5 0 135 60.6 135 135v130c-0.1 24.6-20.1 44.5-44.7 44.5z m-757-89h712.5v-85.5c0-25.4-20.6-46-46-46H202.6c-25.4 0-46 20.6-46 46v85.5zM756.5 721.4H654c-24.6 0-44.5-19.9-44.5-44.5s19.9-44.5 44.5-44.5h102.5c24.6 0 44.5 19.9 44.5 44.5s-19.9 44.5-44.5 44.5z" fill="#333333" p-id="9179"></path></svg><div>PAYMENT INFORMATION</div></div>

            <dl>
              <dt>Cardholder Name</dt>
              <dd>{{ userInfo.getUser().card_name }}</dd>
            </dl>


            <dl>
              <dt>Card Number</dt>
              <dd>{{ userInfo.getUser().card_number }}</dd>
            </dl>

            <dl>
              <dt>Expiration Date</dt>
              <dd>{{ userInfo.getUser().card_date_show }}</dd>
            </dl>

            <div class="logout">
              <span :onClick="logout">Log out</span>
            </div>


          </div>

        </div>
      </el-col>
    </el-row>

  </div>

  <FooterView class="footer" />

</template>

<script lang="ts">
import { Local } from '../utils/storage'
import { useUserInfo } from '../stores/userInfo'
import { ElLoading, ElNotification, type LoadingOptions } from 'element-plus'

const userInfo = useUserInfo()

export default {
  data() {
    return {
      pageTitle: 'Settings - Personal Center'
    };
  },
  created() {
    this.updateTitle();
  },
  methods: {
    updateTitle() {
      document.title = this.pageTitle; // 或者根据需要动态设置标题
    },
    logout() {
        Local.remove('token')
        Local.remove('userInfo')
        ElNotification({
            message: 'logout successful',
            type: 'success',
            zIndex: 9999,
        })
        setTimeout(function(){window.location.href = '/';},1000)
    }

  }

}
</script>

<style>
.container-container-my {
  max-width: 1520px;
  min-width: 1000px;
  padding: 0 5%;
  margin: 170px auto 0 auto;
  min-height: 500px;
  .my-left {
    min-width: 175px;
    padding: 10px;
    .face {
      text-align: center;

      .facename {
      background-color: #333333;
      color: #fff;
      width: 60px;
      height: 60px;
      border-radius: 100px;
      margin-right: 6px;
      line-height: 60px;
      text-align: center;
      font-size: 20px;
      font-weight: 500;
      margin: 0 auto 14px auto;
      }
      h2 {
        font-size: 12px;
        line-height: 1.2;
        width: 125px;
        margin: 4px 0 0 25px;

        overflow: hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
      }
    }
    .list {
      margin: 50px 10px;

      a {
        font-weight: 600;
        display:flex;
        padding: 14px 16px;
        margin-top: 6px;

      }
      svg {
        margin-right: 4px;
        width: 18px;
        height: 18px;
      }
      a , svg {
      color: #666; fill: #666;
      height: 20px;
      line-height: 20px;
      }
      a.on , a.on svg {
        color: #ed0467; fill: #ed0467;
      }
      a:hover , a:hover svg   {
      background-color: #f6f6f6;
      }

    }
  }
  .my-right {
    padding: 10px 0 50px 60px;
    border-left: 1px solid #f1f1f1;
    .my-right-ssettings {
      padding: 10px 0;
      .nanme {
        margin-top: 40px;
        display: flex;
        font-weight: 550;
        svg {
          width: 20px;
          height: 20px;
          margin: 3px 4px 0 0 ;
        }
      }
      .nanme:first-of-type {
        margin-top: 20px;
      }
      dl {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #f1f1f1;
        padding: 20px 4px;
        a {
          background-image: linear-gradient(to right, #f41cb2, #f25511) !important;
          -webkit-background-clip: text !important;
          color: transparent !important;
        }
        dt {
          color: #666;
        }
      }
      .logout {
        text-align: right;
        width: 100%;
        padding: 40px 10px 20px 10px;
        text-align: center;
        span {
          color: #ffffff;
          padding: 16px 50px;
          font-weight: 700;
          cursor: pointer;
          background: linear-gradient(to right, #f41cb2, #f25511) !important;
        }
      }
    }

  }
}

@media only screen and (max-width: 1000px) {
  .container-container-my {
    margin-top: 20px;
    max-width: 100%;
    min-width: 100%;
  }
  .el-col-4 {
    width: 100% !important;
    min-width: 100% !important;
  }
  .my-left {
    width: 100% !important;
    min-width: 100% !important;
    padding: 0 !important;;
    .face {
      display: none;
    }
    .list {
      padding: 70px 0 0 0 !important;
      margin: 0 !important;
      display: flex;
      justify-items: center;
      align-items: center;
      a {
        width: 50%;
        text-align: center;
      }
    }
  }
  .el-col-20 {
    width: 100% !important;
    min-width: 100% !important;
  }
  .my-right {
    padding: 0 !important;
    border-left: 0 !important;
    border-top: 2px solid #000;
    margin-top: 10px;
    h2 {
      display: none;
    }
  }
  .footer {
    display: none;
  }
}
</style>

